<!--
 * @Author: JohnYang
 * @Date: 2020-08-22 10:00:34
 * @LastEditors: JohnYang
 * @LastEditTime: 2020-08-22 10:01:53
-->
<template>
  <div class="textarea">
    <el-input
      v-bind="$attrs"
      v-model.trim="input"
      type="textarea"
      @input="handleInput"
      :rows="4"
      resize="none"
    ></el-input>
    <span class="message-tips">{{ input.length }}/{{ maxLength }}</span>
  </div>
</template>

<script>
export default {
  name: "MessageTextarea",
  props: {
    value: {
      type: String,
      required: true,
    },
    maxLength: {
      type: Number,
      required: false,
      default: 300,
    },
  },
  data() {
    return {
      input: "",
    };
  },
  created() {
    this.input = this.value;
  },
  watch: {
    value: function () {
      this.input = this.value;
    },
  },
  methods: {
    handleInput() {
      if (this.input.length >= this.maxLength) {
        this.input = this.input.substring(0, this.maxLength);
      }
      this.$emit("input", this.input);
    },
  },
};
</script>

<style lang="scss" scoped>
.textarea {
  width: 100%;
  position: relative;
  ::v-deep .el-textarea__inner {
    border-radius: unset;
    padding-bottom: 20px;
  }
  .message-tips {
    position: absolute;
    right: 8px;
    bottom: 5px;
    font-size: 12px;
    font-weight: 400;
    color: #c0c4ccff;
    line-height: 20px;
  }
}
</style>
